<template>
    <div class="block">
        <div class="con1" style="margin-top: 20px">
            <el-row>
                <el-col :span="16">
                    <div class="grid-content bg-purple">
                        <el-carousel trigger="click">
                            <el-carousel-item v-for="item in img_list" :key="item">
                                <img :src="item" alt="">
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </el-col>
                <el-col :span="8" style="padding: 0 10px">
                    <div class="grid-content bg-purple-light">
                        <div id="kuang">
                            <div>
                                <h4 >最新消息 更多
                                </h4>
                            </div>
                            <p @click="goto">. 关于微信订货端今正式上线的通知 2020-04-29</p>
                            <p @click="goto">. 关于交易手续费优惠卷政策的通知 2020-04-29</p>
                            <p @click="goto">. 关于端午促销日全场所有减50通知 2020-04-29</p>
                            <p @click="goto">. 关于新品上市易拉宝购物节的通知 2020-04-29</p>
                            <p @click="goto">. 关于国庆促销日海报宣传物的通知 2020-04-29</p>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="con2" style="margin: 10px 0">
            <el-row>
                <el-col :span="16">
                    <div class="grid-content bg-purple">
                        <el-button type="primary" class="btn" @click="goto1">
                            <i class="el-icon-edit"></i>
                            立即下单
                        </el-button>
                        <el-button type="warning" class="btn" @click="goto2">
                            <i class="el-icon-present"></i>
                            最新促销
                        </el-button>
                        <el-button type="success" class="btn" @click="goto3">
                            <i class="el-icon-star-on"></i>
                            商品收藏
                        </el-button>
                    </div>
                </el-col>
                <el-col :span="8" style="padding: 0 10px">
                    <div class="grid-content bg-purple-light">

                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="con3">
            <el-row>
                <el-col :span="16">
                    <div class="grid-content bg-purple" style="border:1px solid gainsboro;">
                        <div class="yewu">
                            <div class="y1"><h4>业务消息</h4></div>
                            <div class="y1"><h4>更多>></h4></div>
                        </div>
                        <div class="ywcon">
                            <p>暂无更多消息</p>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8" style="padding: 0 10px">
                    <div class="grid-content bg-purple-light">

                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
    export default {
        name: "Home",
        data() {
            return {
                img_list:
                    [

                        'https://oss.dinghuo123.com/images/ad/1040033/f7a8bcdc-9b3e-448b-9638-e55f8c39a5fb.png',
                        'https://oss.dinghuo123.com/images/ad/1040033/6564b111-e10d-40ab-89b3-0d738c2e4756.jpg',
                        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
                        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
            ],

                bannerHeight: 1000,
                screenWidth:0,
            }
        },
        methods:{
            goto(){
                this.$router.push('/Main/Notice')
            },
            goto1(){
                this.$router.push('/Main/Goods/GoodsList')
            },
            goto2(){
                this.$router.push('/Main/Promotion')
            },
            goto3(){
                this.$router.push('/Main/Goods/GoodsCollection')
            }
        },
        mounted() {
            // 首次加载时,需要调用一次
            this.screenWidth =  window.innerWidth;
            // this.setSize();
            // 窗口大小发生改变时,调用一次
            window.onresize = () =>{
                this.screenWidth =  window.innerWidth;
                // this.setSize();
            }
        }
    }
</script>
<style scoped>
    img{
        width: 100%;
        height: inherit;
    }
.btn{
    width: 32%;
    font-size: 20px;
    /*margin: 0 10px;*/
    padding: 25px 20px;
}

#kuang>div{
    padding: 5px 0;
    background: #F7F7F7;
}
#kuang h4{
    color: #2896A9;
    padding: 10px 0;
    margin: 0;
}
#kuang p:hover{
    cursor: pointer;
    color: #2896A9;
}
.yewu{
    display: flex;
    justify-content: space-between;
    background: #F7F7F7;
}
    .y1{
        margin: 0 10px;
        padding: 10px 0;
    }
    .yewu h4{
        color: #2896A9;
        padding: 0;
        margin: 0;
    }
    .ywcon{
        width: 100%;
        height: 300px;
    }
    .ywcon p{
        color: gainsboro;
        margin-left: 10px;
    }


</style>